<template>
    <div class="add">
      <el-card class="add-container">
        <el-form ref="goodRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item prop="nickname" required label="用户昵称">
            <el-input style="width: 300px" v-model="form.nickname" placeholder="请输入用户昵称"></el-input>
          </el-form-item>
          <el-form-item prop="username" label="账户">
            <el-input style="width: 300px" v-model="form.username" placeholder="请输入账户"></el-input>
          </el-form-item>


          <el-form-item prop="avatar" label="头像">
                    <el-upload
                        class="avatar-uploader"
                        action="http://127.0.0.1:99/users/uploadImgs" 
                        method="post"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </el-form-item>


          <el-form-item prop="password" label="密码">
            <el-input style="width: 300px" v-model="form.password" placeholder="请输入用户密码"></el-input>
          </el-form-item>
          <el-form-item prop="gender" label="性别">
            <el-input style="width: 300px" v-model="form.gender" placeholder="请输入性别"></el-input>
          </el-form-item>
          <el-form-item prop="height" label="身高">
            <el-input style="width: 300px" v-model="form.height" placeholder="请输入身高"></el-input>
          </el-form-item>
          <el-form-item prop="weight" label="体重">
            <el-input style="width: 300px" v-model="form.weight" placeholder="请输入体重"></el-input>
          </el-form-item>
          <el-form-item prop="birthday" label="生日">
            <el-input style="width: 300px" v-model="form.birthday" placeholder="请输入生日"></el-input>
          </el-form-item>
          <el-form-item prop="location" label="所在地">
            <el-input style="width: 300px" v-model="form.location" placeholder="请输入所在地"></el-input>
          </el-form-item>
          <el-form-item prop="signature" label="个性签名">
            <el-input style="width: 300px" v-model="form.signature" placeholder="请输入个性签名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitAdd">{{ state.id ? '立即修改' : '立即创建' }}</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
  import axios from '@/utils/axios'
  import md5 from 'js-md5'
  import { ElMessage } from 'element-plus'
  import { useRoute, useRouter } from 'vue-router'
  import { localGet, uploadImgServer, uploadImgsServer } from '@/utils'
  import { useStore } from 'vuex'; 
  
  const { proxy } = getCurrentInstance()
  const editor = ref(null)
  const route = useRoute()
  const router = useRouter()
  const store = useStore(); 


  const state = reactive({
    token: localGet("token"),
    roles: [], // 所有角色数据
  })
  const form = reactive({
    nickname: '',
    username: '',
    password: '',
    avatar: '',
    gender: '',
    height: '',
    weight: '',
    birthday: '',
    location: '',
    signature: '',
  })
  
  const imageUrl = ref('');
  
  // 文件上传成功回调
  const handleAvatarSuccess = (res, file) => {
    console.log(res)
    imageUrl.value = URL.createObjectURL(file.raw);
    form.avatar = res.data; // 假设 res.data 是文件名
  };
  
  // 文件上传前的验证
  const beforeAvatarUpload = (file) => {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;
  
    if (!isJPG) {
      ElMessage.error('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
      ElMessage.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
  };
  
  // 定义验证规则
  const rules = {
    nickname: [
      { required: true, message: '请输入用户昵称', trigger: 'blur' }
    ],
    username: [
      { required: true, message: '请输入账户', trigger: 'blur' }
    ],
    avatar: [
      { required: true, message: '请上传头像', trigger: 'change' }
    ],
    password: [
      { required: true, message: '请输入用户密码', trigger: 'blur' }
    ],
    gender: [
      { required: true, message: '请输入性别', trigger: 'blur' }
    ],
    height: [
      { required: true, message: '请输入身高', trigger: 'blur' }
    ],
    weight: [
      { required: true, message: '请输入体重', trigger: 'blur' }
    ],
    birthday: [
      { required: true, message: '请输入生日', trigger: 'blur' }
    ],
    location: [
      { required: true, message: '请输入所在地', trigger: 'blur' }
    ],
    signature: [
      { required: true, message: '请输入个性签名', trigger: 'blur' }
    ]
  };
  
  // 提交表单
  const submitAdd = () => {
    goodRef.value.validate((valid) => {
      if (valid) {
        form.password = md5(form.password);
        axios.post("/users/addUsers", form).then(
          res => {
            console.log(res)
            if (res == 0) {
              ElMessage.success('成功')
              router.push({ path: '/login' })
            }
          }
        )
      } else {
        ElMessage.error('请填写所有必填项')
        return false;
      }
    });
  };
  
  const goodRef = ref(null);
  </script>
  
  <style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
